<template>
    <div class="login-entry">
        <!-- 1. 顶部关闭按钮 -->
        <a href="javascript:;" class="close-btn">关闭</a>
        <!-- 2. 公司logo  -->
        <div class="logo">
            <h1>
                <a href="javascript:;">
                    <img src="/images/logo.png" alt="伟丰电商Logo" title="伟丰电商Logo" />
                </a>
            </h1>
        </div>
        <!-- 3. 微信登录及提示 -->
        <div class="weChat-info">
            <a href="javascript:;">微信登录</a>
            <a href="javascript:;" @click="showPopHandle()"><span>请使用其它方式登录</span></a>
        </div>
        <!-- 4. 弹层菜单Popup -->
        <van-popup v-model="showPop" position="bottom" :style="{ height: 'auto' }">
            <ul>
                <li>
                    <router-link :to="{ path: '/user/accountlogin' }">手机快速登录</router-link>
                </li>
                <li>
                    <a href="javascript:;">
                        取消
                    </a>
                </li>
            </ul>
        </van-popup>
    </div>
</template>

<script>
    export default {
        watch: {

        },
        created() {

        },
        mounted() {

        },
        data() {
            return {
                // 是否显示弹出层
                showPop: false
            };
        },
        methods: {
            // 点击请使用其它方式登录，弹出菜单底部展开
            showPopHandle() {
                this.showPop = true;
            }
        },
        computed: {

        },
        components: {

        }
    };

</script>

<style lang="scss" scoped>
    .login-entry {
        width: 100%;
        height: 100%;
        background-color: #fff;
        padding: 4.49% 0 0 0;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        .close-btn {
            font-weight: bold;
            font-size: 30px;
            color: #007df2;
            padding-left: 4%;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

        .logo {
            display: flex;
            display: -webkit-flex;
            justify-content: center;
            -webkit-justify-content: center;
            margin-top: 20.16%;
            h1 {
                a {
                    display: block;
                    width: 258px;
                    height: 94px;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }

        .weChat-info {
            width: 612px;
            margin: 0 auto;
            text-align: center;
            margin-top: 34.95%;
            a {
                display: block;
                padding-top: 2px;
                box-sizing: border-box;
                -webkit-box-sizing: border-box;
                &:first-of-type {
                    width: 100%;
                    height: 92px;
                    background-color: #13c300;
                    font-weight: normal;
                    font-size: 26px;
                    line-height: 92px;
                    color: #fff;
                    border-radius: 8px;
                    padding-left: 53px;
                    box-sizing: border-box;
                    -webkit-box-sizing: border-box;
                    position: relative;
                    &::before {
                        content: '';
                        position: absolute;
                        left: 225px;
                        top: 29px;
                        z-index: 1;
                        width: 42px;
                        height: 34px;
                        background: url(/images/wf_ico.png) no-repeat -101px -339px;
                        background-size: 834px 535px;
                    }
                }

                &:last-of-type {
                    span {
                        display: block;
                        font-weight: normal;
                        font-size: 26px;
                        color: #1b87f3;
                        margin-top: 30px;
                    }
                }
            }
        }

        /** vant-popup相关样式 start */
        .van-popup {
            width: 100%;
            background-color: #f2f2f2;
            ul {
                li {
                    height: 84px;
                    line-height: 84px;
                    background-color: #fff;
                    text-align: center;
                    a {
                        display: block;
                        height: 100%;
                        font-weight: normal;
                        font-size: 30px;
                        color: #333;   
                        padding-top: 2px;
                        box-sizing: border-box;
                        -webkit-box-sizing: border-box;
                    }

                    &:first-of-type {
                        margin-bottom: 16px;
                        a {
                            padding-left: 80px;
                            box-sizing: border-box;
                            -webkit-box-sizing: border-box;
                            position: relative;
                            &::before {
                                content: '';
                                position: absolute;
                                left: 272px;
                                top: 20px;
                                z-index: 1;
                                width: 43px;
                                height: 43px;
                                background: url(/images/wf_ico.png) no-repeat -740px -216px;
                                background-size: 834px 535px;
                            }
                        }
                    }
                }
            }
        }
        /** vant-popup相关样式 end */
    }
</style>
